import React, { Component } from 'react';
import { CommonTable } from 'components';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import SearchList from './SearchList/SearchList';
import moment from 'moment';
import { axios } from 'utils';
import {Icon, Modal, Tooltip, Button, Input, Row, Col, message, Table} from "antd";

class YiBao extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loading: false,
            visible: false,
            inputVal: '',
            id: '',
            params: {}
        }
        const _this = this;
        this.columns = [
            { title: '姓名', dataIndex: 'userName', key: 'userName' },
            {
                title: '订单号',
                dataIndex: 'orderNo',
                key: 'orderNo',
                render(text) {
                    return (
                        <CopyToClipboard text={text} onCopy={_this.onCopy}>
                            <Tooltip title={'点击复制'}>
                                <span style={{cursor: 'pointer'}}>{text}</span>
                            </Tooltip>
                        </CopyToClipboard>
                    );

                }
            },
            {
                title: 'requestNo',
                dataIndex: 'requestno',
                key: 'requestno',
                render(text) {
                    return (
                        <CopyToClipboard text={text} onCopy={_this.onCopy}>
                            <Tooltip title={'点击复制'}>
                                <span style={{cursor: 'pointer'}}>{text}</span>
                            </Tooltip>
                        </CopyToClipboard>
                    );

                }
            },
            {
                title: 'ybOrderId',
                dataIndex: 'yborderid',
                key: 'yborderid',
                render(text) {
                    return (
                        <CopyToClipboard text={text} onCopy={_this.onCopy}>
                            <Tooltip title={'点击复制'}>
                                <span style={{cursor: 'pointer'}}>{text}</span>
                            </Tooltip>
                        </CopyToClipboard>
                    );

                }
            },
            { title: '金额', dataIndex: 'amount', key: 'amount' },
            { title: '状态', dataIndex: 'status', key: 'status' },
            {
                title: '主动发起',
                dataIndex: 'isActive',
                key: 'isActive',
                render(text) {
                    return text === 0 ? '否' : '是'
                }
            },
            {
                title: '发起时间',
                dataIndex: 'createTime',
                key: 'createTime',
                render(text) {
                    return moment(Number(text)).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            {
                title: 'error',
                dataIndex: 'errorcode',
                key: 'errorcode',
                render(text, record) {
                    return `状态码：${record.errorcode}，信息：${record.errormsg}`
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    if (!record.yborderid){
                        return (
                            <Tooltip key={4} title={'修改ybOrderId'}>
                                <div onClick={() => _this.changeYbOrderId(text, record)}><Icon type={"file-text"}/></div>
                            </Tooltip>
                        )
                    }
                }
            },
        ]
    }

    onCopy = () => {
        message.success('复制成功', 2);
    }

    changeYbOrderId = (id, record) => {
        this.setState({
            visible: true,
            id,
            inputVal: record.yborderid
        })
    }

    handleSearch = (obj) => {
        const params = obj
        this.getTableData({ ...params });
    }
    
    getTableData = (params) => {
        const data = JSON.stringify(params)
        if ( data === '{}' ) {
            message.warning('查询条件不能为空');
            return
        }
        this.setState({
            loading: true
        })
        this.setState({
            params
        })
        axios({
            url: '/hs/admin/loan/yopPay2usQuery',
            method: 'post',
            data: params
        }).then((res) => {
            if(res) {
                this.setState({
                    data: res.data,
                    loading: false,
                })
            }
        })
    }

    handleOk = () => {
        const { inputVal, params, id } = this.state
        this.setState({
            visible: false
        })
        axios({
            url: '/hs/admin/loan/yopPay2usUpdate',
            method: 'post',
            data: {
                id,
                yborderid: inputVal
            }
        }).then((res) => {
            if(res) {
                this.getTableData(params)
            }
        })
    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    handleInput = (e) => {
        const value = e.target.value
        this.setState({
            inputVal: value
        })
    }
    
    render() {
        const { data, loading, visible, inputVal } = this.state;
        return (
            <div>
                <SearchList submit={this.handleSearch}/>
                <Table
                    columns={this.columns}
                    dataSource={data}
                    loading={loading}
                    bordered
                    rowKey={'id'}
                />
                <Modal
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={800}
                    title={`修改ybOrderId`}
                    visible={visible}
                >
                    <Row>
                        <Col xl={3} style={{marginTop: '4px'}}>ybOrderId: </Col>
                        <Col xl={15}><Input value={inputVal} onChange={this.handleInput} onPressEnter={this.handleInput}/></Col>
                    </Row>
                </Modal>
            </div>
        );
    }
}
export default YiBao